<template lang="pug">
dialogModel(
    ref="dialogLoad"
    title="个人信息"
    width="480"
    :footer="false"
)
    .cont-wrap
        formModel(
            :form="form"
            ref="formRef"
            :flex="false"
        )
</template>

<script setup>

import dialogModel from '@/components/dialogModel.vue'
import formModel from '@/components/formModel.vue'
import { ref, onMounted } from 'vue'
import sysApi from '@system/sysApi'
import { success, warning } from '@/utils/message'
import { storageGet } from '@/utils'

let userInfo = {}
onMounted(() => {
    userInfo = storageGet('userInfo') || {}
    userInfo.roleCodes = userInfo.roles ? userInfo.roles.map(val=>String(val.roleCode)) : []
    formInit()
})
const form = ref([])
const formInit = () => {
    form.value = [
        { type: 'input', label: '账号', maxlength: 50, prop: 'userName', readonly: true },
        { type: 'input', label: '真实姓名', maxlength: 50, prop: 'realName', readonly: true },
        { type: 'select', label: '性别', maxlength: 50, prop: 'sex', option: sysApi.queryAllNotPage({ propType: 'sex' }, true), readonly: true },
        { type: 'input', label: '手机号', maxlength: 50, prop: 'mobileNumber', readonly: true, placeholder: '无' },
        { type: 'select', label: '单位', maxlength: 50, prop: 'belongUnits', option: sysApi.queryAll({}, true), readonly: true },
        { type: 'checkbox', label: '角色', maxlength: 50, prop: 'roleCodes', width: '100%', option: sysApi.queryAllNotPagequeryAllNotPage({}, true), disabled: true }
    ]
    form.value.forEach(val => {
        if(val.prop == 'sex'){
            val.defaultValue = userInfo[val.prop].toString()
        }else{
            val.defaultValue = userInfo[val.prop]
        }
    })
}
const dialogLoad = ref(null)
const open = () =>{
    dialogLoad.value.open()
}
defineExpose({
    open
})
</script>

<style lang="less" scoped>
@import '@/assets/theme.less';
:deep(.el-menu-item){
    line-height: 40px;
}
.cont-wrap{
    margin-top:20px;
    min-height: 260px;
    border-bottom: 1px solid #ccc;
}
.label{
    line-height: 30px;
    text-align: right;
}
:deep(.el-row){
    margin-bottom: 20px;
}
</style>